import React from 'react';
import TweenOne from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import QueueAnim from 'rc-queue-anim';
import { Row, Col } from 'antd';

class Footer extends React.Component {
  static defaultProps = {
    className: 'footer1',
  };

  render() {
    const { ...props } = this.props;
    delete props.dataSource;
    delete props.isMobile;
    
    return (
      <div 
        {...props} 
        className="home-page-wrapper footer1-wrapper"
      >
        <OverPack className="footer1" playScale={0.2}>
          <QueueAnim
            type="bottom"
            key="ul"
            leaveReverse
            component={Row}
            className="home-page"
            gutter={0}
          >
            {/* block0 */}
            <Col key="0" xs={24} md={6} className="block" title={null} content={null}>
              <h2 className="logo">
                <img src="/images/qqaimmXZVSwAhpL.svg" width="100%" alt="img" />
              </h2>
              <div className="slogan">
                <div>Animation specification and components of Ant Design.</div>
              </div>
            </Col>
            
            {/* block1 */}
            <Col key="1" xs={24} md={6} className="block" title={null} content={null}>
              <h2>产品</h2>
              <div>
                <a href="#" key="link0">产品更新记录</a>
                <a href="#" key="link1">API文档</a>
                <a href="#" key="link2">快速入门</a>
                <a href="#" key="link3">参考指南</a>
              </div>
            </Col>
            
            {/* block2 */}
            <Col key="2" xs={24} md={6} className="block" title={null} content={null}>
              <h2>关于</h2>
              <div>
                <a href="#" key="link0">FAQ</a>
                <a href="#" key="link1">联系我们</a>
              </div>
            </Col>
            
            {/* block3 */}
            <Col key="3" xs={24} md={6} className="block" title={null} content={null}>
              <h2>资源</h2>
              <div>
                <a href="#" key="link0">Ant Design</a>
                <a href="#" key="link1">Ant Motion</a>
              </div>
            </Col>
          </QueueAnim>
          <TweenOne
            animation={{ y: '+=30', opacity: 0, type: 'from' }}
            key="copyright"
            className="copyright-wrapper"
          >
            <div className="home-page">
              <div className="copyright">
                <span>
                  ©2018 by <a href="https://motion.ant.design">Ant Motion</a> All Rights
                  Reserved
                </span>
              </div>
            </div>
          </TweenOne>
        </OverPack>
      </div>
    );
  }
}

export default Footer;
